<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">

   
<!-- ztree -->
<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">

<script type="text/javascript" th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>


		<style type="text/css">
	table.dataTable thead th, table.dataTable tbody th {
		border-bottom: 1px solid #ddd;
		text-align:center;
	}

	table.dataTable tfoot th, table.dataTable tfoot td {
		border-top: 1px solid #e5e5e5 ;
	}

	/* datatable */
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		border: 0px;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.current,
		.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
		{
		background: #3f51b5;
		border: 0px;
		color: #ffff !important;
		padding: 0.3em 1em;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
		padding: 0.3em 1em;
		border: 0px;
	}

	.form-control {
		border-radius: 2px;
		box-shadow: none;
		border-color: #dddddd;
		padding: 8px 12px;
	}

	.form-group {
		margin-right: 20px;
	}

	.component-section {
		margin-top: 20px;
	}

	label {
		margin-right: 5px;
	}

	table.dataTable {
		line-height: 1.8;
	}
	.col-lg-3 {
		-ms-flex: 0 0 24% !important;
		flex: 0 0 24% !important ;
		max-width: 24% !important;;
	}
	.col-lg-4 {
		-ms-flex: 0 0 32% !important;
		flex: 0 0 32% !important ;
		max-width: 32% !important;;
	}
	.margin-right-0{
		margin-right:0px !important ;
	}
	.form-builder .form-group{
		margin-right:0px;
	}
	</style>

		<!-- nav_start -->
		<ol class="breadcrumb">
			<li class="breadcrumb-item">基础平台</li>
			<li class="breadcrumb-item">监管按理</li>
			<li class="breadcrumb-item active">系统预警</li>
		</ol>
		<!-- nav_end -->

		<div class="container-fluid">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
						<div class="card col-lg-3 tree-card" style="float: left; margin-right: 1% ; overflow-x: hidden; overflow-y: scroll;">
							<div class="card-body">
								<ul id="treeDemo" class="ztree"></ul>	
							</div>
						</div>

						<div class="col-lg-6" style="float: left;">
							<div class="card card-body">
								<form class="form-inline" id="AlinesnoSearchForm" action="" method="post">
									
								</form>
							</div>
						</div>
						
						<div class="col-lg-3 form-builder" style="float: left;">
							<div class="card">
								<div class="card-header">
									<strong>基础组件</strong>
								</div>
								<div class="card-body">
									 <div class="form-group">
										<label for="exampleInputName2">文本框</label>
										<input class="form-control" name="condition[applicationName|like]" id="exampleInputName2" type="text" placeholder="应用名称">
									  </div>
									  
									  <div class="form-group">
										<label for="exampleInputName2">代码框</label>
										<input class="form-control" name="condition[hasStatus]"  id="exampleInputEmail2" type="text" placeholder="状态">
									  </div>
									  
									  <div class="form-group">
										  <label for="exampleInputName2">复选框</label>
										  <div class="col-md-9 col-form-label">
											<div class="form-check form-check-inline mr-1">
												<input class="form-check-input" id="inline-checkbox1" type="checkbox" value="check1">
												<label class="form-check-label" for="inline-checkbox1">One</label>
											</div>
											<div class="form-check form-check-inline mr-1">
												<input class="form-check-input" id="inline-checkbox2" type="checkbox" value="check2">
												<label class="form-check-label" for="inline-checkbox2">Two</label>
											</div>
											<div class="form-check form-check-inline mr-1">
												<input class="form-check-input" id="inline-checkbox3" type="checkbox" value="check3">
												<label class="form-check-label" for="inline-checkbox3">Three</label>
											</div>
										</div>
									  </div>
									  
									  <div class="form-group">
										  <label for="exampleInputName2">单选框</label>
										  <select class="form-control" id="select1" name="select1">
											<option value="0">Please select</option>
											<option value="1">Option #1</option>
											<option value="2">Option #2</option>
											<option value="3">Option #3</option>
										 </select>
									  </div>
									  
									  <div class="form-group">
										  <label for="exampleInputName2">时间框</label>
										  <input class="form-control" id="date-input" type="date" name="date-input" placeholder="date">
									  </div>
									  
								</div>
							</div>
							
						</div>
					</div>
					<!-- /.col-->
				</div>
				<!-- /.row-->
			</div>
		</div>


	</div>

	<script th:src="@{/asserts/vendors/datatables/datatables.js}"></script>
	<script th:src="@{/asserts/vendors/layer/layer.js}"></script>
	
	<script th:src="@{/asserts/vendors/jquery.form/jquery.form.min.js}"></script>
	<script th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.min.js}"></script>

<script type="text/javascript">
	var setting = {
		async : {
			enable : true,
			url: ctx+"boot/platform/application/menusData" ,
			otherParam:{"applicationId":function(){return $("input[id=applicationId]").val();}}
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "resourceParent",
				rootPId : 0
			},
			key : {
				name : "resourceName"
			}
		},
		callback : {
			onClick : zTreeOnClick 
			// onAsyncSuccess : zTreeOnAsyncSuccess
		}
	};

	function zTreeOnClick(event, treeId, treeNode) {
		console.log("tree node id = " + treeNode.id) ; 
		/*
		$("input[id=selectResourceParentNode]").attr("data-id" ,treeNode.id) ; 
		$("input[id=selectResourceParentNode]").attr("data-resourceName" ,treeNode.resourceName) ; 
		*/
		
		$("input[id=resourceParent]").val(treeNode.id) ;
		search() ; 
	};

	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getNodes();
		for (var i = 0; i < nodes.length; i++) { //设置节点展开
			treeObj.expandNode(nodes[i], true, true , true);
		}
	}

	$(document).ready(function() {
		var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
		treeObj.expandAll(true);
		
		var h = $(document).height() - 125 ; 
		$("div.tree-card").css("height" , h) ; 
	});
</script>

	<script type="text/javascript">
		var dataTable;

		// key event
		function enterSearch() {
			$('#AlinesnoSearchForm input').each(function() {
				$(this).keyup(function(event) {
					if (event.keyCode == 13) {
						search();
					}
				});
			});
		}
		
		/**
		 * 刷新当前选择节点的父节点
		 */
		function refreshParentNode() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = "refresh",
			silent = false,
			nodes = zTree.getSelectedNodes();
			/*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/
			var parentNode = zTree.getNodeByTId(nodes[0].parentTId);
			/*选中指定节点*/
			zTree.selectNode(parentNode);
			zTree.reAsyncChildNodes(parentNode, type, silent);
		}

		/**
		 * get params
		 */
		function paramsBuilder() {
			var param = {};
			$('#AlinesnoSortPanel input').each(function() {
				if ($(this).val() != '' && this.name != '') {
					param[this.name] = this.value;
				}

			});

			$('#AlinesnoSearchForm input').each(function() {
				if ($(this).val() != '' && this.name != '') {
					param[this.name] = this.value;
				}

			});

			$('#trainingSearchForm .selectpicker').each(
					function() {
						console.log('value = ' + this.value + ' , value = ' + $(this).val());
						if ($(this).val() != null && $(this).val() != '' && this.name != '') {
							param[this.name] = $(this).val();
						}
					});
			return param;
		}

		//搜索
		function search(btn) {
			// $("input#resourceParent").val("") ; 
			$('#datatables').dataTable().fnDraw(false);
		}

		// 添加
		function addItem() {
			layer.open({
				type : 2,
				title : '添加',
				shadeClose : true,
				shade : 0.8,
				maxmin : true, //开启最大化最小化按钮
				area : [ '600px', '800px' ],
				content : ctx+'boot/platform/menus/add'
			});
		}
		
		// 添加
		function modifyItem() {
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			if(selectRows.length == 0){
				layer.alert("编辑请选择元素.")
				return ; 
			}
			if(selectRows.length > 1){
				layer.alert("编辑请选择一条元素.")
				return ; 
			}
			var row = selectRows[0] ; 
			layer.open({type: 2,title: '修改',shadeClose: true,shade: 0.8,maxmin: true, area : [ '600px', '800px' ],
				  content: ctx+'boot/platform/menus/modify?id='+row.id 
			});	
		}

		// 删除多元素
		function deleteMultipleItem() {
			var selectRows = $('#datatables').DataTable().rows('.selected').data();
			var rowsId = new Array();
			for (var i = 0; i < selectRows.length; i++) {
				rowsId.push(selectRows[i].id);
			}
			$.post(ctx+"boot/platform/menus/delete", {
				rowsId : rowsId
			}, function(response) {
				console.log('response = ' + response);
				search(null) ; 
			})
			// refreshParentNode() ; 
		}

		// 删除单个元素
		function deleteSingleItem() {
			var selectRow = $('#datatables').DataTable().row('.selected');
			console.log("select row = " + selectRow);
			selectRow.remove().draw(false);
		}
		
		function editItem(){
			var id = $('#datatables').DataTable().rows('.selected').data()[0]['id'];
			// menusEditForm
			$.getJSON(ctx+"boot/platform/menus/detail?id="+id , function(response){
			 	console.log("response = " + response) ; 
			 	if(response.code == 200){
			 		$("form#menusEditForm").autofill(response.data);			 		
			 	}else{
			 		layer.alert(response.message) ; 
			 	}
			}) ; 
		}

		function showApplication(){
			var index = layer.open({
				type : 2,
				title : '应用管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '30%', '70%' ],
				content : ctx+'boot/platform/application/select' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-applicationName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("applicationId = " + id + " , applicationIdLabel = " + resourceName) ;
					
					$("input[name=applicationIdLabel]").val(resourceName) ; 
					$("input[id=applicationId]").val(id) ; 
			
					search(null) ; 
					var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
					treeObj.reAsyncChildNodes(null, "refresh");
					
					layer.close(index) ; 
			 	}
			});		
		}
		
		function showResourceParent(){
			var index = layer.open({
				type : 2,
				title : '菜单管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '40%', '80%' ],
				content : ctx+'boot/platform/menus/parents?id=1' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-resourceName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("selectResourceId = " + id + " , selectResourceName = " + resourceName) ;
					
					$("input[name=resourceParentLabel]").val(resourceName) ; 
					$("input[name=resourceParent]").val(id) ; 
					
					layer.close(index) ; 
			 	}
			});		
		}
	</script>

</body>
</html>
